<template>
  <div>
    <div class="classifyMain flex">
      <div class="left">
        <div class="leftClassify" v-for="(item) in firstCategoryList" :key="item.catId"  :class="{'borderL':item.catId == selectedFirstCategory}" @click="selectedCategory(item.catId)">{{item.name}}
        </div>
      </div>
      <div class="right">
        <div class="rightTop">
          <img src="../../assets/imgs/baidu-02.png"/>
        </div>
        <div class="secondbox"  v-for="(item) in secondCategoryList" :key="item.catId">
          <div class="secondboxTop">
            —{{item.name}}—
          </div>
          <div class="secondboxContent flex">
            <div v-for="(secondItem) in item.jdCategroyDtos" :key="secondItem.catId" class="goodsItem flex" @click="selectedThirdCategory(secondItem.catId)">
              <img :src="secondItem.imgUrl"/>
              <p class="rightP ecs ecs-2">{{secondItem.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hua-footer></hua-footer>
  </div>
</template>

<script>
import HuaFooter from "@/components/shop/footer";
import http from "@/utils/http";
import Api from "@/utils/api";
export default {
  data() {
    return {
      firstCategoryList: [], // 所有一级分类
      secondCategoryList: [], // 所有二级分类
      selectedFirstCategory: "", // 选中的一级分类
      selectedFirstCategoryImg: "", // 选中的一级分类图片
      selectedFirstCategoryName: "", // 选中的一级分类名字
    };
  },
  created: function() {
    this.init();
  },
  components: {
    HuaFooter
  },
  methods: {
    init() {
      this.getJdCategoryFirstList();
    },
    getJdCategoryFirstList() {
      // 查询所有JD一级分类
      this.$vux.loading.show({
        text: "Loading"
      });
      http.post(Api.getJdCategoryList, {}).then(res => {
        // 查询所有JD一级分类
        this.$vux.loading.hide();
        if (res.code == 200) {
          let data = res.data;
          this.firstCategoryList = data;
          this.selectedFirstCategory = data[0].catId;
          this.selectedFirstCategoryImg = data[0].jdCategroyDtos[0].imgUrl;
          this.selectedFirstCategoryName = data[0].name;
          this.secondCategoryList = data[0].jdCategroyDtos
        } else {
          this.toast(res.message);
        }
      });
    },
    // 点击一级分类事件
    selectedCategory(catId) { // 修改一级分类二级分类改变
      this.firstCategoryList.map((item, index) => {
        if(item.catId == catId) {
          this.secondCategoryList = item.jdCategroyDtos
          this.selectedFirstCategory = catId
        }
      })
    },
    // 点击三级分类事件
    selectedThirdCategory(catId) { // 跳转到三级分类页面
      this.$router.push("/categoryList?catId="+catId);
    }, 
  }
};
</script>

<style lang="less" scoped>
.borderL {
    border-left: 3px solid #FBC200;
    color: #464646;
  }
.classifyMain {
  border-top: 1px solid #f2f2f2;
  height: 85vh;
  position: relative;
  top: 7vh;
  background: #ffffff;
  overflow-y: scroll;
  .left {
    width: 1.6rem;
    text-align: center;
    font-size: 0.28rem;
    color: #909090;
    border-right: 1px solid #f2f2f2;
    overflow-y: scroll;
    .leftClassify {
      margin-top: 0.3rem;
      height: 0.42rem;
      line-height: 0.42rem;
      padding: 0.1rem 0;
    }
  }
  .right{
    width: 5.2rem;
    height: 85vh;
    overflow: auto;
    padding: 0 .3rem;
    .rightTop{
      img{
        padding: .3rem 0;
        width: 5.2rem;
        height: 1.9rem;
      }
    }
    .secondbox{
      box-sizing: content-box;
      padding: 0 .6rem 0 .4rem;
      padding-bottom: .68rem;
      .secondboxTop{
        height: .3rem;
        line-height: .3rem;
        color: #464646;
        font-size: .28rem;
        text-align: center;
      }
      .secondboxContent{
        flex-wrap: wrap;
        .goodsItem{
          padding-top: .6rem;
          width: 33.3%;
          min-height: 1.5rem;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          img{
            width: 1rem;
            height: 1rem;
          }
          p{
            margin-top: .2rem;
            height: .6rem;
            width: 80%;
            font-size: .24rem;
            color: #909090;
            text-align: center;
            overflow: hidden;
            padding: 0.05rem 0;
          }
        }
      }
    }
  }
}
</style>

